import React from 'react';
import {Router, Route, Link} from 'react-router';

import utils from '../js/utils';
import config from '../../config/config';



class User extends React.Component {
  constructor () {
    super();

    this.state = {
      router: '/user',
      list: [],
      size: 0,

      page: 0,
      page_status: true,
      user_biaoqian_status: false,

      desinger_id: "",

      delete_id: 0,
      delete_ele: null
    }
  }

  componentDidMount () {

    let _this = this;
    let paixu = $(this.refs.paixu).find("option:selected").attr('data-id');
    let dengji = $(this.refs.dengji).find("option:selected").attr('data-id');

    utils.post('/get_designer_list', {page: 1, paixu, dengji}, function (res) {
      console.log(res);
      if (parseInt(res.code, 10) == 200) {
        _this.setState({
          list: res.list,
          size: res.size
        })
      }
    })

    $('#submitClose').click(function () {
      _this.setState({
        delete_id: 0,
        delete_ele: null
      })
    })

    $('#submitChange').click(function () {
      if (_this.state.delete_id == 0) {
        return;
      }

      utils.post('/delete_customer_from_id', {id: _this.state.delete_id}, function (res) {
        $('#myModal').modal('hide');
        $('#submitChange').hide();
        if (parseInt(res.code, 10) == 200) {
          $(_this.state.delete_ele).parent('td').parent('tr').remove();
          _this.setState({
            delete_id: 0,
            delete_ele: null
          })
        }
      })
    })
  }

  searchArticle () {

    let title = this.refs.article_title.value.trim();
    let page = 1;

    let _this = this;
    let paixu = $(this.refs.paixu).find("option:selected").attr('data-id');
    let dengji = $(this.refs.dengji).find("option:selected").attr('data-id');

    utils.post('/search_designer_from_title', {title, page, paixu, dengji}, function (res) {

      if (parseInt(res.code, 10) == 200) {
        _this.setState({
          list: res.list,
          size: res.size
        })
        return
      }

      $('.modal-body').text(res.errmsg);
      $('#myModal').modal('show');
    })
  }

  data_prev () {
    let page = this.state.page -1 <= 0 ? 0 : this.state.page -1;
    this.setState({
      page: page
    })
    let _this = this;

    let paixu = $(this.refs.paixu).find("option:selected").attr('data-id');
    let dengji = $(this.refs.dengji).find("option:selected").attr('data-id');

    utils.post('/get_designer_list', {page: page, paixu, dengji}, function (res) {
      console.log(res);
      if (parseInt(res.code, 10) == 200) {
        _this.setState({
          list: res.list,
          size: res.size
        })
      }
    })
  }

  data_next () {
    let page = (this.state.page + 1 >= Math.ceil(this.state.size / 30) ? Math.ceil(this.state.size / 30) : (this.state.page + 1));
    this.setState({
      page: page
    })
    let _this = this;
    let paixu = $(this.refs.paixu).find("option:selected").attr('data-id');
    let dengji = $(this.refs.dengji).find("option:selected").attr('data-id');
    utils.post('/get_designer_list', {page: page, paixu, dengji}, function (res) {
      console.log(res);
      if (parseInt(res.code, 10) == 200) {
        _this.setState({
          list: res.list,
          size: res.size
        })
      }
    })
  }

  closeUserBiaoqian () {
    this.setState({
      user_biaoqian_status: false
    })
  }

  showBiaoqian (e) {
    let ele = e.target || e.srcElement;
    let id = $(ele).attr('data-id');
    let designer_level = $(ele).attr("data-designer-level");
    let designer_tag = $(ele).attr("data-designer-tag");

    $(this.refs.biaoqian).val(designer_tag);
    $("#designer_level").find("option[data-id='"+ designer_level +"']").attr("selected",true);

    // console.log();
    this.setState({
      user_biaoqian_status: true,
      desinger_id: id
    })
  }

  saveBiaoqian () {
    let desinger_id = this.state.desinger_id;
    let biaoqian = $(this.refs.biaoqian).val().trim();
    let designer_level = $("#designer_level").find("option:selected").attr('data-id');
    let _this = this;
    console.log(desinger_id);
    console.log(designer_level);
    utils.post("/save_desinger_level", {desinger_id, biaoqian, designer_level}, function (res) {
      console.log(res);
      $('.modal-body').text(res.errmsg);
      $('#myModal').modal('show');
      _this.setState({
        user_biaoqian_status: false
      })

      if (parseInt(res.code, 10) == 200) {
        let paixu = $(_this.refs.paixu).find("option:selected").attr('data-id');
        let dengji = $(_this.refs.dengji).find("option:selected").attr('data-id');

        utils.post('/get_designer_list', {page: _this.state.page, paixu, dengji}, function (res) {
          console.log(res);
          if (parseInt(res.code, 10) == 200) {
            _this.setState({
              list: res.list,
              size: res.size
            })
          }
        })
      }
    })
  }

  deleteCustomer (e) {
    let ele = e.target || e.srcElement;
    let customer_id = $(ele).attr('data-id');
    this.setState({
      delete_id: customer_id,
      delete_ele: ele
    })

    $('.modal-body').text("确定删除编号" + customer_id + "的设计师？");
    $('#myModal').modal('show');
    $('#submitChange').show();
  }

  render () {
    let showBiaoqian = this.showBiaoqian.bind(this);
    let deleteCustomer = this.deleteCustomer.bind(this);
    return (
      <div>
        <div className='bamboo-nav'>当前位置：设计师管理</div>
        <div className='bamboo-content' style={{minHeight: (window.innerHeight - 75 - 65) + 'px'}}>
          <div className="bamboo-articles-header">
            <div>
              <span>排序</span>
              <select className="select-class" ref="paixu">
                <option data-id="0">默认时间</option>
                <option data-id="1">作品数量</option>
              </select>
              <span>等级</span>
              <select className="select-class" ref="dengji">
                <option data-id="-1">全部</option>
                <option data-id="0">未设置</option>
                <option data-id="1">初级</option>
                <option data-id="2">中级</option>
                <option data-id="3">高级</option>
              </select>
            </div>
            <div>
              <input type="text" className="form-control" ref="article_title" placeholder="设计师编号/店铺名/联系电话/微信/标签"/><a onClick={this.searchArticle.bind(this)} href="javascript:void(0)" className="bamboo-btn-green">查找</a><span>（共计{this.state.size}位设计师）</span>
            </div>
          </div>

          <div className='bamboo-user-biaoqian' style={{display: this.state.user_biaoqian_status ? "block" : "none"}}>
            <div onClick={this.closeUserBiaoqian.bind(this)}></div>
            <div>
              <div>
                <h3>设计师等级</h3>
                <select className="select-class" id="designer_level">
                  <option data-id="0">未设置</option>
                  <option data-id="1">初级</option>
                  <option data-id="2">中级</option>
                  <option data-id="3">高级</option>
                </select>
              </div>
              <div>
                <h3>添加标签</h3>
                <input type="text" ref="biaoqian" placeholder="多个标签请用英文逗号(,)隔开" className="form-control"/>
              </div>
              <a href="javascript:void(0)" onClick={this.saveBiaoqian.bind(this)}>保存</a>
            </div>
          </div>

          <div className="bamboo-articles-list">
            <table className='bamboo-table'>
              <thead>
                <tr>
                  <th>设计师编号</th>
                  <th>设计师姓名</th>
                  <th>等级</th>
                  <th>标签</th>
                  <th>作品数量</th>
                  <th>联系电话</th>
                  <th>微信号</th>
                  <th>银行卡号</th>
                  <th>开户银行</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                {
                  this.state.list.map(function (item, idx) {
                    return <tr key={idx}>
                      <td style={{width: "8rem"}}>{item.customer_id}</td>
                      <td style={{width: "10rem"}}>{item.shop_name}</td>
                      <td style={{width: "6rem"}}>{
                          parseInt(item.designer_level, 10) == 0 ? "未设置" : parseInt(item.designer_level, 10) == 1 ? "初级" : parseInt(item.designer_level, 10) == 2 ? "中级" : "高级"}</td>
                      <td>{item.designer_tag}</td>
                      <td style={{width: "8rem"}}>{item.project_num}</td>
                      <td style={{width: "10rem"}}>{item.shop_contact_phone}</td>
                      <td style={{width: "5rem"}}>{item.shop_contact_wechat}</td>
                      <td style={{width: "10rem"}}>{item.shop_gather_account}</td>
                      <td style={{width: "10rem"}}>{item.shop_gather_account_area}</td>
                      <td style={{width: "18rem"}}>
                        <a style={{marginRight:"1rem"}} href="javascript:void(0)" data-id={item['_id']['$oid']} data-designer-level={item.designer_level} data-designer-tag={item.designer_tag} onClick={showBiaoqian} className="bamboo-btn-green">添加标签</a>
                        <a href="javascript:void(0)" data-id={item.customer_id} onClick={deleteCustomer} className="btn btn-danger">删除</a>
                      </td>
                    </tr>
                  })
                }
              </tbody>
            </table>
            <div className='xlb-data-page' style={{display: this.state.page_status ? "block" : "none"}}>
              <div style={{display: 'inline-block'}}>
                <a onClick={this.data_prev.bind(this)} className="btn btn-success">上一页</a>
                <a onClick={this.data_next.bind(this)} className="btn btn-warning">下一页</a>
              </div>
              <span>当前第<span>{this.state.page + 1}</span>页</span>
              <span>共<span>{Math.ceil(this.state.size / 30)}</span>页</span>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default User;
